<template>
    <div class="body_background" :style="GetWindowBackground">
        <div class="body_background padding-top10">
            <ul class="block-box capital-ul">
                <div class="big-font-size main-color title">选择充值金额</div>
                <li v-for="(item,index) in dataList"
                    :key="index"
                    @click="rechargeChose(item,index)"
                    :class="indexChose==index?'background white-color':''"
                >{{(dataList.length-1)==index?'':'￥'}}{{item}}
                </li>
                <input type="number" v-model="rechargePrice" placeholder="请输入充值金额" v-if="otherInput">
            </ul>

            <div class="block-box">
                <div class="big-font-size main-color title">上传凭证</div>
                <div>
                    <div class="upload-box">
                        <img src="../../assets/img/upload.png"/>
                        <input class="upload" @change='' type="file">
                    </div>
                    <div class="three-color small-font-size">请上传付款转账的截图或照片，仅支持jpg,png格式</div>
                </div>
            </div>
            <div class="block-box items-start">
                <div class="big-font-size main-color">充值备注</div>
                <textarea class="note-content" placeholder="请输入充值备注"></textarea>
            </div>
            <mt-button class="button-recharge background white-color"
                       @click="rechargeFun"
            >充值
            </mt-button>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    export default {
        name: "RechargeView",
        data() {
            return {
                indexChose: 0,
                GetWindowBackground: {
                    'min-height': ''
                },
                dataList: ['1000', '2000', '5000', '10000', '自定义'],
                imgs: [],
                imgData: {
                    accept: 'image/gif, image/jpeg, image/png, image/jpg',
                },
                otherInput: false,
                rechargePrice: 0,
            }
        },
        methods: {
            //选择充值金额
            rechargeChose(e, index) {
                this.indexChose = index
                this.rechargePrice = e
                this.otherInput = e == '自定义' ? true : false
            },
            //立即充值
            rechargeFun() {
                var price=this.rechargePrice;
                if(price==0 || price=='自定义'){
                    Toast('请确定充值金额')
                    return
                }
                var data = {
                    price: this.rechargePrice
                }
                console.log(data)
            },
            add_img(event) {
                let reader = new FileReader();
                let img1 = event.target.files[0];
                let type = img1.type;//文件的类型，判断是否是图片  
                let size = img1.size;//文件的大小，判断图片的大小  
                if (this.imgData.accept.indexOf(type) == -1) {
                    alert('请选择我们支持的图片格式！');
                    return false;
                }
                if (size > 3145728) {
                    alert('请选择3M以内的图片！');
                    return false;
                }
                var uri = ''
                let form = new FormData();
                form.append('file', img1, img1.name);
                this.$ajax.post('/file/upload', form, {
                    headers: {'Content-Type': 'multipart/form-data'}
                }).then(response => {
                    console.log(response.data)
                    uri = response.data.url
                    reader.readAsDataURL(img1);
                    var that = this;
                    reader.onloadend = function () {
                        that.imgs.push(uri);
                    }
                }).catch(error => {
                    alert('上传图片出错！');
                })
            },

            getBodyHeight() {
                // 获取浏览器高度，减去顶部搜索栏和导航栏的值 55 + 50（可动态获取）,再减去底部高度值60
                this.GetWindowBackground['min-height'] = window.innerHeight + 'px'
            },
        },
        mounted() {
            this.rechargePrice = this.dataList[0]
            // this.$axios.get("/static/data.json").then((res)=>{
            //     this.list=res.data.list;
            // })
        },
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getBodyHeight) // 注册监听器
            this.getBodyHeight() // 页面创建时先调用一次
        },
    }
</script>

<style lang="scss" scoped>

    .capital-ul {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        li {
            width: 29%;
            padding: 6px 0;
            background: #EFFBF5;
            border: 1.5px solid #05C569;
            border-radius: 4px;
            margin: 10px 5px;
            font-size: 14px;
            color: #05C569;
        }
        input{
            width: calc(100% - 15px);
            height: 30px;
            border-radius: 4px;
            padding-left: 10px;
            border: 1px solid #eef0f3;
            margin-top: 10px;
            margin-left: 5px;
        }
    }

    .title {
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
    }

    .button-recharge {
        background: #05c569;
        border-radius: 10px;
        font-size: 15px;
        width: 60%;
        margin: 20px auto;
    }

    .upload-box {
        width: 72px;
        height: 72px;
        position: relative;
        margin: 0 auto 10px auto;
        img {
            width: 100%;
        }
        input {
            width: 72px;
            height: 72px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            border: 1px solid red;
            outline: none;
            opacity: 0;
        }
    }

    .note-content {
        width: calc(100% - 20px);
        border-radius: 6px;
        border: 1px solid #eef0f3;
        margin: 8px 0 15px 0;
        text-align: left;
        font-size: 13px;
        padding: 10px;
    }

</style>